Network Chart
Network diagrams (also called Graphs) show interconnections between a set of entities. Each entity is represented by a Node (or vertice). Connection between nodes are represented through links (or edges). Networks is an entire field of research in itself. For example, you need to set up a layout algorythm that finds out an optimal position for each node. Several type of networks exist. They can be directed (flow) or undirected (connection). Links can be wheigthed or not.
Example Color Themes
<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/canvasXpress.min.js"></script>
<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
<canvas id="canvasId" width="600" height="600"</canvas>
</div>
<!-- Create a script to initialize the chart -->
<script>
<!-- Create the data for the graph -->
var data = {
"edges" : [{"color" : "rgb(51,12,255)","endArrow" : "arrow","id1" : "Gene1","id2" : "Gene2","startArrow" : "square","type" : "curved","width" : "3"},{"color" : "rgb(51,12,255)","endArrow" : "arrow","id1" : "Gene4","id2" : "Gene3","startArrow" : "square","type" : "dashedCurved","width" : "3"},{"color" : "rgb(51,12,255)","endArrow" : "arrow","id1" : "Gene5","id2" : "Met","type" : "line","width" : "3"},{"color" : "rgb(51,12,255)","endArrow" : "round","id1" : "Gene3","id2" : "DNA","startArrow" : "square","type" : "bezier","width" : "3"},{"color" : "rgb(51,12,255)","endArrow" : "square","id1" : "Gene7","id2" : "Gene1","startArrow" : "arrow","type" : "dashedBezier","width" : "3"},{"color" : "rgb(51,12,255)","elbows" : [
[235,100],
[50,100],
[50,230]
],
"endArrow" : "square",
"id1" : "Gene5",
"id2" : "Gene7",
"type" : "dotted",
"width" : "3"
},
{
"color" : "rgb(51,12,255)",
"elbows" : [[275,100,325,100,325,165],
[325,165,325,270,425,270]
],
"endArrow" : "square",
"id1" : "Gene5",
"id2" : "DNA",
"type" : "bezier",
"width" : "3"
}
],
"legend" : {
"edges" : [{"id" : "edgesLegendId0","text" : "Activate","type" : "arrowHeadLine"}],
"nodes" : [{"color" : "rgb(255,0,0)","id" : "nodesLegendId0","shape" : "sphere","text" : "Gene"}],
"pos" : {
"decorations" : {
"x" : 450,
"y" : 360
},
"edges" : {
"x" : 360,
"y" : -5
},
"nodes" : {
"x" : -5,
"y" : -5
}
},
"text" : [{"id" : "textLegendId0","text" : "Cool Pathway","x" : 150,"y" : 460}]
},
"nodes" : [{"eventless" : true,"height" : 400,"hideLabel" : true,"id" : "Cell","imagePath" : "https : //www.canvasxpress.org/assets/images/cell.png","shape" : "image","width" : 525,"x" : 250,"y" : 250},{"exp1" : 1,"exp2" : 2,"exp3" : 4,"exp4" : {"cl1" : 2,"cl2" : 4,"cl3" : 3},"exp5" : {"cl1" : 12,"cl2" : 1,"cl3" : 5},"height" : 40,"id" : "Gene1","imagePath" : "https : //www.canvasxpress.org/assets/images/prot.png","shape" : "image","width" : 40,"x" : 155,"y" : 160},{"color" : "rgb(255,0,0)","exp1" : 2,"exp2" : 4,"exp3" : 1,"exp4" : {"cl1" : 7,"cl2" : 1,"cl3" : 8},"exp5" : {"cl1" : 1,"cl2" : 11,"cl3" : 8},"id" : "Gene2","shape" : "sphere","size" : 1,"x" : 155,"y" : 340},{"color" : "rgb(255,0,0)","exp1" : 1,"exp2" : 5,"exp3" : 1,"exp4" : {"cl1" : 12,"cl2" : 4,"cl3" : 8},"exp5" : {"cl1" : 3,"cl2" : 7,"cl3" : 5},"id" : "Gene3","shape" : "sphere","size" : 1,"x" : 355,"y" : 160},{"color" : "rgb(255,0,0)","exp1" : 4,"exp2" : 2,"exp3" : 1,"exp4" : {"cl1" : 1,"cl2" : 14,"cl3" : 7},"exp5" : {"cl1" : 2,"cl2" : 1,"cl3" : 15},"id" : "Gene4","label" : "Receptor Gene4","shape" : "sphere","size" : 1,"x" : 355,"y" : 340},{"color" : "rgb(255,0,0)","exp1" : 1,"exp2" : 3,"exp3" : 2,"exp4" : {"cl1" : 4,"cl2" : 4,"cl3" : 8},"exp5" : {"cl1" : 6,"cl2" : 7,"cl3" : 2},"height" : 20,"id" : "Gene5","shape" : "sphere","width" : 20,"x" : 255,"y" : 100},{"height" : 40,"hideLabel" : true,"id" : "Met","imagePath" : "https : //www.canvasxpress.org/assets/images/met.png","shape" : "image","width" : 40,"x" : 255,"y" : 400},{"exp1" : 3,"exp2" : 3,"exp3" : 4,"exp4" : {"cl1" : 2,"cl2" : 14,"cl3" : 1},"exp5" : {"cl1" : 9,"cl2" : 3,"cl3" : 5},"height" : 40,"id" : "Gene7","imagePath" : "https : //www.canvasxpress.org/assets/images/prot7.png","shape" : "image","width" : 40,"x" : 50,"y" : 250},{"height" : 40,"hideLabel" : true,"id" : "DNA","imagePath" : "https : //www.canvasxpress.org/assets/images/dna1.png","shape" : "image","width" : 40,"x" : 450,"y" : 250}]
}
<-- Create the configuration for the graph -->
var config = {
"calculateLayout":"false",
"decorations":[
"exp1",
"exp2",
"exp3"
],
"decorationsPosition":"top",
"decorationsType":"bar",
"graphType":"Network",
"networkFreezeOnLoad":"true",
"nodeFontColor":"rgb(29,34,43)",
"showAnimation":"true",
"showDecorations":"true"
}
<!-- Call the CanvasXpress function to create the graph -->
var cX = new CanvasXpress("canvasId", data, config);
</script>
library(canvasXpress)
nodes=read.table("https://www.canvasxpress.org/data/cX-networkbasic-nodes.txt", header=TRUE, sep="\t", quote="", fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
edges=read.table("https://www.canvasxpress.org/data/cX-networkbasic-edges.txt", header=TRUE, sep="\t", quote="", fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
nodeData=nodes,
edgeData=edges,
calculateLayout=FALSE,
decorations=list("exp1", "exp2", "exp3"),
decorationsPosition="top",
decorationsType="bar",
graphType="Network",
networkFreezeOnLoad=TRUE,
nodeFontColor="rgb(29,34,43)",
showAnimation=TRUE,
showDecorations=TRUE
)
Create New Page